<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <style>
        body {
            background: #41302b;
        }

        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 374px;
            height: 275px;
            background-color: pink;
            border-radius: 16px;
        }

        form {}

        form>* {
            margin-top: 17px;
        }

        label {
            width: 40px;
        }

        /* 两个按钮 */
        form input[type=text],
        form input[type=password] {
            outline: none;
            border-radius: 7px;
            font-size: 12px;
            width: 190px;
            height: 30px;
            line-height: 30px;
            padding-left: 5px;

        }

        /* 按钮 */
        .btns {
            text-align: center;
        }

        .btns button:first-of-type {
            margin-right: 2px;
        }

        .btns button {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btns button:hover {
            transform: scale(1.1);
        }

        .btns button:focus {
            outline: none;
        }

        .btns button:first-of-type {
            background: linear-gradient(to right, #ff5edf, #04befe);
            color: #fff;
        }

        .btns button:first-of-type:hover {
            box-shadow: 0 0 15px rgba(255, 94, 223, 0.6);
        }

        .btns button:last-of-type {
            background: linear-gradient(to left, #f2709c, #ff9472);
            color: #fff;
        }

        .btns button:last-of-type:hover {
            box-shadow: 0 0 15px rgba(242, 112, 156, 0.6);
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 登录的盒子 -->
        <form id="login" action="#" onsubmit="return false">
            <div class="accountBox">
                <label for="account">账号：</label>
                <input type="text" name="account" id="account">
            </div>
            <div class="passwordBox">
                <label for="account">密码：</label>
                <input type="password" name="password" id="password">
            </div>
            <div class="btns">
                <button type="submit">
                    登录
                </button>
                <!-- 点击 ↓  ↓  ↓  ↓  ↓ 翻转盒子 -->
                <button type="button" onclick="regist()">
                    注册 →
                </button>
            </div>
        </form>
        <!-- 注册的盒子 -->
        <form id="register" action="#" onsubmit="return false">
            <div class="accountBox">
                <label for="account">账号：</label>
                <input type="text" name="account" id="account">
            </div>
            <div class="usernameBox">
                <label for="username">昵称：</label>
                <input type="text" name="username" id="username">
            </div>
            <div class="passwordBox">
                <label for="password">密码：</label>
                <input type="password" name="password" id="password">
            </div>
            <div class="passwordReBox">
                <label for="passwordRe">再输：</label>
                <input type="password" name="passwordRe" id="passwordRe">
            </div>
            <div class="btns">
                <!-- 点击 ↓  ↓  ↓  ↓  ↓ 翻转盒子 -->
                <button type="button" onclick="login()">
                    ← 登录
                </button>
                <button type="submit">
                    注册
                </button>
            </div>
        </form>
    </div>
</body>
<script src="/admin/assets/js/jquery-3.5.1.min.js"></script>
<script>
    // 用户登录
    $('#login').on('submit', function () {
        let user = {};
        $.ajax({
            url: '/user.do/login',
            type: 'post',
            async: false,
            data: {
                account: $('#login #account').val(),
                password: $('#login  #password').val(),
            },
            success: function (res) {
                console.log(res);
                user = res.data;
                if(res.code == 200){
                    location.href = '/user/';
                }else{
                    alert(res.message)
                }
            },
            error: function (res) {
                console.log(res);
            }
        })
        return user;
    })
    // 用户注册
    $('#register').on('submit', function () {
        let user = {};
        $.ajax({
            url: '/user.do/register',
            type: 'post',
            async: false,
            headers: {
                'Content-Type': 'application/json'
            },
            data: JSON.stringify({
                account: $('#register #account').val(),
                password: $('#register  #password').val(),
                userName: $('#register #account').val(),
            }),
            success: function (res) {
                // console.log(res);
                user = res.data;
                // location.href ='?';
                if (res.code == 200) {
                    login();
                } else{
                    alert(res.message)
                }
            },
            error: function (res) {
                console.log(res);
            }
        })
        return user;
    })
    // 翻转盒子函数
    // function turnOver(obj) {
    //     // 判断如果点击的是登录 向右 →→→ 翻转盒子

    //     // 判断如果点击的是注册 向左 ←←← 翻转盒子
    // }
    $("#login").show();
    $("#register").hide();
    // 显示注册表单,隐藏登录表单
    function regist() {
        $("#login").hide();
        $("#register").show();
        // $(".btns button").text("《《《 登录");
    }

    // 显示登录表单,隐藏注册表单 
    function login() {
        $("#login").show();
        $("#register").hide();
        // $(".btns button").text("注册 >>>");
    }
</script>

</html>